<template>
  <div class="header">
    <div class="for-sticky">
      <!--LOGO-->
      <div class="col-md-2 col-xs-6 logo">
        <a href="index.html">
          <img alt="logo" class="logo-nav" src="../../assets/images/logo.png">
        </a>
      </div>
      <!--/.LOGO END-->
    </div>
    <div :class="{'show-menu':showMenu,'hiden-menu':!showMenu}" class="menu-wrap">
      <nav class="menu">
        <div class="menu-list">
          <a data-scroll="" href="#home" class="active">
            <span>Home</span>
          </a>
          <a data-scroll="" href="#about">
            <span>About</span>
          </a>
          <a data-scroll="" href="#work">
            <span>Work</span>
          </a>
          <a data-scroll="" href="#services">
            <span>Services</span>
          </a>
          <a data-scroll="" href="#employement">
            <span>Employement</span>
          </a>
          <a data-scroll="" href="#skill">
            <span>Skills</span>
          </a>
          <a data-scroll="" href="#education">
            <span>Education</span>
          </a>
          <a data-scroll="" href="#testimonial">
            <span>Testimonial</span>
          </a>
          <a data-scroll="" href="#blog">
            <span>Blog</span>
          </a>
          <a data-scroll="" href="#contact">
            <span>Contact</span>
          </a>
        </div>
      </nav>
      <button class="close-button" @click="closeMenu">Close Menu</button>
    </div>
    <button class="menu-button" @click="openMenu">
      <span></span>
      <span></span>
      <span></span>
    </button><!--/.for-sticky-->
  </div>
</template>

<script>
export default {
  name: "header-self",
  data() {
    return {
      showMenu: false // 展示菜单
    }
  },
  methods: {
    /**
     * 打开菜单
     */
    openMenu() {
      this.showMenu = true
    },
    /**
     * 关闭菜单
     */
    closeMenu() {
      this.showMenu = false
    }
  }
}
</script>

<style scoped>
a {
  color: #2f2f2f;
  text-decoration: none;
  transition: ease .6s;
  -webkit-transition: ease .6s;
  -moz-transition: ease .6s;
  -o-transition: ease .6s;
  -ms-transition: ease .6s;
}

a:hover {
  text-decoration: none;
  color: #818181;
}

a:focus {
  outline: none;
  color: #999999;
  text-decoration: none;
}

iframe {
  border: none;
  width: 100%;
}

img {
  max-width: 100%;
}

*:focus {
  outline: none;
}

/*----------------------------------------- 4) Header --------------------------------------------------*/
.header {
  width: 100%;
}

.for-sticky {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  opacity: 0.8;
  top: 0;
  left: 0;
  border-bottom: 1px solid #f1f1f1;
  display: block;
  padding: 0 15px 5px 15px;
  background: #ffffff;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.logo-nav {
  padding: 6px 0 10px 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  width: 45px;
  display: block;
}

/* Menu Button */
.menu-button {
  width: 34px;
  height: 45px;
  position: fixed;
  right: 0;
  margin-top: 13px;
  margin-right: 35px;
  z-index: 1000;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: none;
}

.menu-button span {
  display: block;
  position: absolute;
  height: 1px;
  width: 100%;
  background: #2f2f2f;
  border-radius: 9px;
  opacity: 1;
  left: 0;
}

.menu-button span:nth-child(1) {
  top: 0;
}

.menu-button span:nth-child(2) {
  top: 9px;
}

.menu-button span:nth-child(3) {
  top: 18px;
}

.menu-button:hover {
  opacity: 0.6;
}

/* Close Button */
.close-button {
  width: 1em;
  height: 1em;
  position: absolute;
  right: 1em;
  top: 1em;
  overflow: hidden;
  text-indent: 1em;
  font-size: 0.75em;
  border: none;
  background: transparent;
  color: transparent;
}

.close-button::before,
.close-button::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 100%;
  top: 0;
  left: 50%;
  background: #bdc3c7;
}

.close-button:hover {
  cursor: pointer;
}

.close-button::before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.close-button::after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* Menu */
.menu-wrap {
  position: fixed;
  z-index: 1001;
  width: 300px;
  height: 100%;
  right: 0;
  float: right;
  background: #2f2f2f;
  padding: 2.5em 1.5em 0;
  opacity: 0.8;
  -webkit-transition: -webkit-transform 0.4s;
  transition: transform 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}

.menu,
.menu-list {
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.menu-list {
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
}

.menu-list a {
  display: block;
  padding: 1.5em 0;
  -webkit-transform: translate3d(0, 500px, 0);
  transform: translate3d(0, 500px, 0);
  color: #a5a5a5;
  position: relative;
}

.menu-list a:hover, .menu-list a:active span {
  color: #ffffff;
}

.menu-list,
.menu-list a {
  -webkit-transition: -webkit-transform 0s 0.4s;
  transition: transform 0s 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}

.menu a:nth-child(2) {
  -webkit-transform: translate3d(0, 1000px, 0);
  transform: translate3d(0, 1000px, 0);
}

.menu-list a:nth-child(3) {
  -webkit-transform: translate3d(0, 1500px, 0);
  transform: translate3d(0, 1500px, 0);
}

.menu-list a:nth-child(4) {
  -webkit-transform: translate3d(0, 2000px, 0);
  transform: translate3d(0, 2000px, 0);
}

.menu-list a:nth-child(5) {
  -webkit-transform: translate3d(0, 2500px, 0);
  transform: translate3d(0, 2500px, 0);
}

.menu-list a:nth-child(6) {
  -webkit-transform: translate3d(0, 3000px, 0);
  transform: translate3d(0, 3000px, 0);
}

.menu-list a span:nth-last-child(1) {
  margin-bottom: 100px;
}

.menu-list a span {
  margin-left: 10px;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 5px;
  text-transform: uppercase;
  z-index: 2;
  position: absolute;
  margin-bottom: 20px;
  padding: 10px;
}

.menu-list a span:before {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  background: #ffffff;
  -webkit-transition: width .3s ease;
  transition: width .3s ease;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  z-index: -1;
}

.menu-list a.active span {
  color: #ffffff !important;
}

.menu-list a.active span:before {
  width: 100%;
}
.hiden-menu{
  transform: translate3d(calc(3em + 300px), 0, 0);
}
/* Shown menu */
.show-menu .menu-wrap {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0) ;
  -webkit-transition: -webkit-transform 0.8s;
  transition: transform 0.8s;
  -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}

.show-menu .menu-list,
.show-menu .menu-list a {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: -webkit-transform 0.8s;
  transition: transform 0.8s;
  -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}

.show-menu .menu-list a {
  -webkit-transition-duration: 0.9s;
  transition-duration: 0.9s;
}

.show-menu .content::before {
  opacity: 1;
  -webkit-transition: opacity 0.8s;
  transition: opacity 0.8s;
  -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

</style>
